<template >
  <div class="home">
    <detailSection title="地图周边" more="查看更多周边信息">
        <div class="baidu" ref="mapref">
        </div>
    </detailSection>
  </div>
</template>

<script setup>
import detailSection from '@/components/detail-section/detail-section.vue';
import { onMounted , ref } from 'vue';
import usedetailstore from '@/stores/modules/detail';
import { storeToRefs } from 'pinia';
const detailstore=usedetailstore();
const {houseinfos}=storeToRefs(detailstore);
const mainPart=houseinfos.value.mainPart;
const mapdata=mainPart.dynamicModule.positionModule;
// console.log(map);


const mapref=ref();
//确保地图挂载
onMounted(()=>{
    const map = new BMapGL.Map(mapref.value);          // 创建地图实例 
    const point = new BMapGL.Point(mapdata.longitude, mapdata.latitude);  // 创建点坐标 
    map.centerAndZoom(point, 15);   
    const marker = new BMapGL.Marker(point);   
    map.addOverlay(marker);               // 初始化地图，设置中心点坐标和地图级别
})
</script>

<style>
.baidu{
    height: 300px;
}
</style>